<template>
      <!--轮播图-->
    <el-carousel v-if="swiperList.length" class="swiper-container" type="card" height="200px" :interval="4000">
        <el-carousel-item v-for="(item, index) in swiperList" :key="index">
            <img :src="getUrl(item.bannerUrl)" />
        </el-carousel-item>
    </el-carousel>
    
    <!-- 歌单推荐 -->
    <div class="songlist-recommend">
        <h2>歌单推荐</h2>
        <el-carousel class="carousel-style" height="270px" :autoplay="false" indicator-position="none">
            <el-carousel-item v-for="(arr, index) in playList" :key="index">
                <div class="play-card-list">
                    <SonglistCard :playlists="arr"/>
                </div>
            </el-carousel-item>
          </el-carousel>
    </div>
    
    <!-- 歌手推荐 -->
    <div class="songlist-recommend">
        <h2>歌手推荐</h2>
        <el-carousel class="carousel-style" height="270px" :autoplay="false" indicator-position="none">
            <el-carousel-item v-for="(arr, index) in singerList" :key="index">
                <div class="play-card-list">
                    <SingerCardList :singerList="arr"/>
                </div>
            </el-carousel-item>
          </el-carousel>
    </div>
</template>
<script setup lang="ts">
    import { onMounted, ref } from "vue";
    import { getBanners, getAllSinger, getAllPlayList} from "@/api";
    import { getUrl } from "@/utils/format";
    import SonglistCard from "@/components/common/SonglistCard.vue";
    import SingerCardList from "@/components/common/SingerCardList.vue";
    const swiperList = ref<IBanner[]>([]);// 轮播图 每次都在进行查询
    async function getSwiper(){
        const data = await getBanners();
        swiperList.value = data;
        console.log("swiper",swiperList);

    };
    onMounted(() => {
        getSwiper();
        getPlayList();
        getSingerList()
    });
    const playList = ref<IPlayList[]>([]);// 轮播图 每次都在进行查询
    const singerList = ref<any>([]);// 轮播图 每次都在进行查询

    async function getPlayList(){
        let data = await getAllPlayList();
        data = chunkArray(data.slice(0, 20), 4);
        playList.value = data;
    }

    async function getSingerList(){
        let data = await getAllSinger();
        data = chunkArray(data.slice(0, 20), 4);        
        singerList.value = data;
    }

    function chunkArray(array: any, chunkSize: number) {
        let result = [];
        for (let i = 0; i < array.length; i += chunkSize) {
            result.push(array.slice(i, i + chunkSize));
        }
        return result;
        }
</script>
<style lang="less" scoped>
.swiper-container {
  width: 90%;
  margin: auto;
  padding-top: 20px;
  img {
    width: 100%;
  }
}

.songlist-recommend {
    margin-top: 50px;
    .carousel-style {
    }

    h2 {
        width: max-content;
        margin: 0 auto 30px;
    }
}

.song-card-list{
    margin-top: 0;
}

.play-card-list{
    width: 100%;
    display: flex;
    justify-content: space-evenly;
    flex-wrap: nowrap;
    padding: 0 20px;
    box-sizing: border-box;
}
</style>
